<template>
    <div>
        <el-tabs v-model="activeTab">
            <template v-for="(tab, index) in tabs" :key="index">
                <el-tab-pane :label="tab.Label" :name="index">
                    <el-form :model="formData[tab.Name]" :ref="`formRefs[${index}]`" label-width="80px">
                        <template v-for="(field, fIndex) in tab.Fields" :key="fIndex">
                            <el-form-item :label="field.Label">
                                <el-input v-model="formData[tab.Name][field.Prop]"></el-input>
                            </el-form-item>
                        </template>
                        <el-form-item>
                            <el-button @click="submitTabForm(index)">提交本页</el-button>
                        </el-form-item>
                    </el-form>
                </el-tab-pane>
            </template>
        </el-tabs>
    </div>
</template>

<script>
    export default {
        data() {
            const tabs = JSON.parse('[{"Label":"基本信息","Name":"basicInfo","Fields":[{"Prop":"name","Label":"姓名"},{"Prop":"age","Label":"年龄"}]},{"Label":"联系方式","Name":"contactInfo","Fields":[{"Prop":"phone","Label":"电话"},{"Prop":"email","Label":"邮箱"}]}]');
            const formData = {};
            tabs.forEach(tab => {
                formData[tab.Name] = {};
            });
            return {
                activeTab: '0',
                tabs,
                formData,
                formRefs: {}
            };
        },
        methods: {
            submitTabForm(index) {
                this.$refs[`formRefs[${index}]`].validate((valid) => {
                    if (valid) {
                        console.log(`第 ${index + 1} 页表单提交成功`, this.formData[this.tabs[index].Name]);
                    } else {
                        console.log(`第 ${index + 1} 页表单验证失败`);
                        return false;
                    }
                });
            }
        }
    };
</script>

<style scoped>
    /* 可添加自定义样式 */
</style>